<template>
  <el-button
    type="primary"
    size="default"
    @click="emit('setState', 1)"
    icon="ele-Plus"
    :disabled="!category3Id"
    >添加SPU</el-button
  >

  <el-table :data="spuPageList" border stripe :style="{ margin: '30px 0 ' }">
    <el-table-column type="index" width="80" label="序号" />
    <el-table-column label="SPU名称" prop="spuName"> </el-table-column>
    <el-table-column label="SPU描述" prop="description"> </el-table-column>
    <el-table-column label="操作">
      <template v-slot="{ row, $index }">
        <el-button
          type="primary"
          size="small"
          @click="emit('setState', 2, row)"
          title="添加SKU"
          icon="ele-Plus"
        ></el-button>
        <el-button
          type="primary"
          size="small"
          @click="emit('setState', 1, row)"
          title="编辑SPU"
          icon="ele-Edit"
        ></el-button>
        <el-button
          type="info"
          size="small"
          @click=""
          title="查看SKU"
          icon="ele-View"
        ></el-button>
        <el-button
          type="danger"
          size="small"
          @click="deleteSpu(row)"
          title="删除SPU"
          icon="ele-Delete"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:page-size="limit"
    v-model:current-page="page"
    :page-sizes="[3, 5, 7, 9]"
    :pager-count="5"
    layout="prev, pager, next, sizes"
    :total="total"
    background
  />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch, defineEmits } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import useAttrStore from "@/stores/attr";
import { requestDeleteSpu, requestSpuList } from "@/api/spu";
import type { SpuInfoType } from "@/api/spu";

//初始化页码的数据
const limit = ref(3);
const page = ref(1);
const total = ref(0);

//拿到pinia中的三级分类数据
const attrStore = useAttrStore();
const { category3Id } = storeToRefs(attrStore);

//接收自定义事件函数
const emit = defineEmits<{
  (event: "setState", state: number, row?: SpuInfoType): void;
}>();

//声明数据保存Spu分页列表
const spuPageList = ref<SpuInfoType[]>([]);
//发送spu分页列表请求
const getSpuPageList = async () => {
  try {
    //发送请求拿到数据
    const result = await requestSpuList(
      page.value,
      limit.value,
      category3Id.value as number
    );
    //把分页数据中的总数和分类列表交给我们的响应式数据
    spuPageList.value = result.records;
    total.value = result.total;
  } catch (e) {
    ElMessage.error("请求分页列表失败");
  }
};
//1.当三级分类被选择的时候,展示当前三级分类下的所有spu
watch(
  category3Id,
  (newVal) => {
    if (category3Id.value === null) {
      //如果三级分类变为null,则清空分页列表
      spuPageList.value = [];
      //总数据条数为0
      total.value = 0;
      return;
    }
    //一旦category3Id发生变化,就立即发送请求 请求新的分页列表
    getSpuPageList();
  },
  { immediate: true }
);
//watch监听页码的改变发送请求
watch([limit, page], () => {
  //如果页码改变 然后切换了二级分类 这时候category3Id会改变为null 页码也会改变请求 所以判断在null的时候直接退出执行
  if (category3Id.value === null) {
    return;
  }
  getSpuPageList();
});

//删除某个spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpu(row.id as number);
    ElMessage.success("删除成功");
    getSpuPageList();
  } catch (e) {
    ElMessage.error("删除失败");
  }
};
</script>
